<template>
  <div class="home_page">
    <!-- 顶部 -->
    <NavTopBar class="nav-top-bar" :class="{ active: isScroll }">
      <template #left>
        <van-icon name="wap-nav" @click="$router.push('/category')" />
      </template>
      <template #title>
        <div class="serch">
          <span class="app-name">新蜂商城</span>
          <span class="serch-title">山河无恙，人间皆安</span>
        </div>
      </template>
      <template #right>
        <router-link v-if="!isLogin" to="/login">登录</router-link>
        <router-link v-else to="/user">
          <van-icon name="manager" />
        </router-link>
      </template>
    </NavTopBar>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        @refresh="onRefresh"
      >
        <!-- 轮播 -->
        <Swipe :list="swiperList" />

        <!-- 分类按钮 -->
        <Category :list="categoryLIst" :tips="tips" />

        <!-- 商品列表 -->

        <van-skeleton   :row="3" :loading="loading">
          <div class="goods">
            <h2 class="goods_category">新品上线</h2>
            <GoodsItme :list="newGoodses" />
            <h2 class="goods_category">热门商品</h2>
            <GoodsItme :list="hots" />
            <h2 class="goods_category">最新推荐</h2>
            <GoodsItme :list="recommends" />
          </div>
        </van-skeleton>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script lang="ts">
import { defineComponent, nextTick, ref, computed } from 'vue'
import baseHook from './hook/base'
import Swipe from './component/Swipe.vue'
import Category from './component/category.vue'
import categoryHook from './hook/category'
import GoodsItme from './component/goods.vue'
import NavTopBar from './component/NavTopbar.vue'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'home',
  components: { Swipe, Category, GoodsItme, NavTopBar },
  setup() {
    const store = useStore()
    const {
      swiperList,
      newGoodses,
      hots,
      recommends,
      loading,
      finished,
      onLoad,
      onRefresh,
      refreshing,
    } = baseHook()
    const { categoryLIst, tips } = categoryHook()
    let isScroll: any = ref(null)
    nextTick(() => {
      window.addEventListener('scroll', () => {
        let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop
        scrollTop > 100 ? (isScroll.value = true) : (isScroll.value = false)
      })
    })

    return {
      swiperList,
      newGoodses,
      hots,
      recommends,
      categoryLIst,
      tips,
      isScroll,
      loading,
      finished,
      onLoad,
      onRefresh,
      refreshing,
      isLogin: computed(() => !!store.state.user.token),
    }
  },
})
</script>

<style lang="scss" scoped>
.home_page {
  padding-bottom: 100px;
}
.goods {
  margin-top: 10px;
  &_category {
    text-align: center;
    font-size: 16px;
    line-height: 50px;
    background: #f9f9f9;
    color: #1baeae;
    font-weight: 500;
  }
}
.nav-top-bar {
  &.active {
    background: #1baeae;
    .van-nav-bar__left,
    .van-nav-bar__right {
      i,
      span,
      a {
        color: #fff;
        height: 20px;
      }
    }
  }
  :deep .van-nav-bar__right {
    i,
    span,
    a {
      color: #1baeae;
    }
  }
  .app-name {
    color: #1baeae;
    font-size: 20px;
    font-weight: bold;
    border-right: 1px solid #000;
    display: inline-block;
    padding-right: 10px;
  }
  .serch-title {
    font-size: 14px;
    display: inline-block;
    padding: 0 16px;
    color: #666;
  }
}
.serch {
  height: 100%;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
</style>
